<template>
	
	<view class="scencedetail">
		
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="景区详情"></Header> -->
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiper-contain">
				<view class="back">
					<text @click="back()" class="iconfont icon-left"></text>
				</view>
				<swiper @change="onSwiperChange" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				 :duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor	">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" class="swiper-img"></image>
					</swiper-item>
				</swiper>
				<!-- <view class="dots">
					<block v-for="(item_1, index1) in swiperList" :key="index1">
						<view class="dot" :class="index1 == currentSwiper ? ' active' : ''"></view>
					</block>
				</view> -->
				<view class="pic-tip">
					<view class="pic">
						<view>
							<text  @click="goPhotoList(0)" style="font-size: 30upx;" class="iconfont icon-xiangji image"></text>
						</view>
						
						<view  @click="goPhotoList(0)">
							<text>相册 |</text>
						</view>
						<view  @click="goPhotoList(1)">
							<text style="margin-left: 6upx;">视频</text>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 轮播图 end -->
			<!-- 介绍 -->
			<view class="scenic-introduce">
				<view class="title-line">
					<view class="fz28 h-c font-weight over2 name">{{getDetails.title || ""}}</view>
					<!-- <view v-if="getDetails.audioPath&&getDetails.audioPath.length>0" class="fz15 lbbox" @click="audioPlay(getDetails.audioPath)">
						<image class="lb-icon" src="../../static/img/lb.png" mode=""></image>
						语音介绍
					</view> -->
				</view>
				<view class="fz15 h-c sciene-con-box">
					<view class="sciene-con">
						<text >
							{{getDetails.digest}}
						</text>
					</view>
					<view>
						<text class="c-btn" @click="viewtext" v-if="introduction.length > 60">
						{{view_text}}
						</text>
					</view>	
				</view>
			</view>
			<!-- 介绍 end -->
			<!--景区指南-->
			<view class="scence-guide">
				<view class="guide-img">
					<text>景区指南</text>
				</view>
				<view class="guide-tab">
					<view class="left-all">
						<view class="time">
							<view class="left-time">
								<text>开放时间：</text>
							</view>
							<view class="right-time">
								<text >{{getDetails.datamark_new}}</text>
							</view>
						</view>
						<view class="ticket">
							<view class="left-ticket">
								<text >游玩项目：</text>
							</view>
							<view class="right-ticket">
								<text >{{getDetails.project_new}}</text>
							</view>
						</view>
						<view class="tips">
							<view class="left-tips">
								<text>交通信息：</text>	
							</view>
							<view class="right-tips">
								<text >{{getDetails.scenicTraffic_new}}</text>
							</view>
						</view>	
						<view class="bus">
							<view class="left-bus">
								<text>免票政策：</text>
							</view>
							<view class="right-bus">
								<text >{{getDetails.ticketRaiders_new}}</text>
							</view>
						</view>	
					</view>
					
					<view class="right-more">
						<view class="more-img" @click="goGuideMore(getDetails)">
								<text class="iconfont icon-right"></text>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 详细地址 -->
			<view class="address-list">
				<view class="fz15 h-c address" @click="goWay()">
					<view class="tip-img">
						<image src="../../static/img/address.png"></image>
					</view>
					<view class="address-del over1">{{getDetails.address}}</view>
					<view class="tip" @click="goWay()">
						<text class="iconfont icon-right"></text>	
					</view>
				</view>
			</view>

			<!-- 景区须知 end -->
			
			<!--富文本-->
			<view style="line-height: 100upx;">
				<u-parse :noData="getDetails.empty" :content = "getDetails.context"></u-parse>
			</view>
			<!-- 门票须知 -->
			<!-- -->
			<view class="fz15 h-c notes-booking" v-if="getTicket.length > 0">
				<view class="tickets-head">
					<view class="title">
						<text style="color: #ff7800;" class="iconfont icon-zuo fz16"></text>
						<text class="fz18">景区门票</text>
						<text style="color: #ff7800;" class="iconfont icon-you fz16"></text>
					</view>
					<view class="nav-bar">
						
					</view>
				</view>
				<view class="notes-li" v-for="(tickets, i) in getTicket" :key='i'>
					<view class="notes-info">
						<view class="fz18 over font-weight notes-name">{{tickets.goodsName}}</view>
						<view class="second">
							<!-- <view class="back-tips" v-if="tickets.canRefund == '1'">
								<text class="iconfont icon-check-circle"></text>
								<text>随时退</text>
							</view> -->
							<view class="back-tips">
								<text class="iconfont icon-check-circle"></text>
								<text>不可改退</text>
							</view>
							<view class="money">
								￥<text class="fz18">{{tickets.lmmProductPriceResult.spotPrice}}</text>
							</view>
						</view>
						<view class="third">
							<view class="ticket-nodes" @click="reserve(tickets, 0)">
								<text>订票须知</text>
								<text class="iconfont icon-right"></text>
							</view>
							<view class="notes-con-btn" @click="reserve(tickets, 1)">
									预订
							</view>
						</view>
					</view>
					
					<!-- <view class="fz14 notes-con">
						<view class="notes-con-left" @click="reserve(tickets, 0)">
							<view class="back-tips">
								<text class="iconfont icon-check-circle"></text>
								<text>随时退</text>
							</view>
							
							<text>订票须知</text>
							<text class="iconfont icon-right"></text>
							 <image class="right-icon" src="../../static/img/right.png" mode=""></image> 
						</view>
						<view class="tc notes-con-right">
							<view class="fz10 notes-con-money">
								￥
								<text class="fz15">{{tickets.price}}</text>
							</view>
							<view class="notes-con-btn" @click="reserve(tickets, 1)">
								预订
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<!-- 门票须知 end -->
			<view class="line20"></view>
			<!--游客点评-->
			<!-- <view style='width:100%;height:24upx;background:#F7F7F7'></view> -->
			<view class='flex-row flex-space'  style='margin-top:42upx;padding-left:24upx;box-sizing: border-box;padding-right:24upx;align-items: baseline;overflow: hidden;'>
			  <view>
			    <text style="color:#333333;font-size:40upx;font-weight:bold;line-height: 1.2;">游客点评</text>
			    <text style="color:#808080;font-size:28upx;line-height:30upx;margin-left:12upx;">(共{{total || 0}}条)</text>
			  </view>
			  <view v-if="comments.length <= 3" v-hidden="comments.length >= 1" class="flex-row" style='margin-top: 40upx;margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;overflow: hidden;'>
			    <view class='lookMoreCommentKey' @click='lookMoreComment()'>添加评论</view>
			    <!-- <image class='lookMoreCommentIco' @click='lookMoreComment()' src='../../static/img/rightArrow.png'></image> -->
				<view class="lookMoreCommentIco">
					<text class='iconfont icon-right' @click='lookMoreComment()'></text>
				</view>
			  </view>
			</view>
			<block  v-for="(item,index) in comments" v-if="index < 3" :key="index" v-hidden="comments.length == 0">
			  <view class="flex-col" style='widht:100%;margin-top:33upx;box-sizing: border-box;padding-left:24upx;padding-right:24upx;'>
			    <view class='flex-row' style='align-items: center;'>
			      <image class="headPortrait" :src='item.headPortrait'> </image>
			      <text style='margin-left:18upx;color:#333333;font-size:34upx;line-height:34upx;font-weight:bold;'>{{item.nickname}}</text>
			    </view>
			    <text style='color:#808080;font-size:26upx;margin-top:5upx;margin-left:70upx;'>点评时间:{{item.createTimeStr}}</text>
			    <text style='color:#1A1A1A;font-size:30upx;margin-top:25upx;margin-left:70upx;'>{{item.content}}</text>
			    <view v-if="index < 3" style='margin-top:43upx; width:100%;height:1px;background:#F7F7F7'></view>
			  </view>
			</block>
			<view class="noComment" v-if="comments.length < 1">
			  <image class='noCommentImg' src='../../static/img/pinglun.png'></image>
			  <!-- <text class='noCommentKey'>暂无点评</text> -->
			</view>
			<view v-if="comments.length > 3" v-hidden="comments.length == 0" class="flex-row" style='width: 100%;margin-right: 30upx;margin-top: 40upx;margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;overflow: hidden;'>
			  <view class='lookMoreCommentKey' @click='lookMoreComment()'>查看全部评论</view>
			  <image class='lookMoreCommentIco' @click='lookMoreComment()' src='../../static/img/rightArrow.png'></image>
			</view>
			<!-- 住客点评 end -->
			<view class="line20"></view>
			<view class="popular-travels">
				<view class="popular-travels-title">
					<text>热门推荐</text>
				</view>
				 <view class="popular-travels-list-boxs">
					 <block v-for="(item,index) in recommendTravels" :key="index">
						 <view class="popular-travels-list" @click="goToTravel(item.id,item.type)">
							 <view class="popular-travels-list-img">
								 <image :src="item.otherImage" style="width: 100%;height: 100%;border-radius: 6px 6px 0px 0px;"></image>
								 <view class="discover-travelist-aers">
								 	<!-- <text class="iconfont icon-location-fill" style="margin-right: 5upx;"></text> -->
								 	<text>{{item.type}}</text>
								 </view>
							 </view>
							
							 <view class="popular-travels-list-info">
								 <view class="popular-travels-list-text">
									 <text>{{item.title}}</text>
								 </view>
								 <view class="popular-travels-role">
									 <!-- <view class="popular-travels-list-headPortrait">
										<image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.headPortrait"></image>
									 </view> -->
									 <view>
										<view class="popular-travels-list-author">
											<text>{{item.readCount || '0'}}人浏览</text>
										</view>
										 <!-- <view class="popular-travels-list-time">
											 <text>{{item.sendTime}}</text>
										 </view> -->
									 </view>
								 </view>
								 
							 </view>
						 </view>
					 </block>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uParse from "@/components/gaoyia-parse/parse.vue"

	var innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				setitle:'',
				recommendTravels:[],
				comments:[],
				total:'',
				indicatorColor: '#000',
				indicatorActiveColor: "#fff",
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				currentSwiper: 0,
				swiperList: [],
				tabVal: 0,
				getDetails: {},
				getTicket: [],
				queryList: [],
				searchList: [],
				scenic_spots_all: [],
				scenic_spots_all_clone: [],
				scenic_spots: [],
				comment_list:[],
				all_text: '点击显示全部',
				ischange: true,
				view_text: '显示全文',
				introduction: '',
				isfull: true,
				scenicId: '',
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false,
				startPlay: true, // 控制播放,
				items: {},
				spotCity: ''
			}
		},
		components: {
			Header,
			uniLoadMore,
			uniNavBar,
			uParse
		},
		onLoad: function(option) {
			// if (option.userinfo) {
			// 	let userinfo = JSON.parse(decodeURIComponent(option.userinfo));
			// 	if (userinfo.appid) {
			// 		this.pub.setAppid(userinfo.appid)
			// 	}
			// 	if (userinfo.secret) {
			// 		this.pub.setSecret(userinfo.secret)
			// 	}
			// 	this.pub.getEncryptionOid(userinfo, function(res) {})
			// }
			// let param = {location:"兰州市",keyword:""};
			// console.log((JSON.stringify(param)));
			console.log("传过来的参数>>>>>>>>>>>>>>>>>>",option)
			this.scenicId = option.id;
			this.getNewTravels_discover()
		},
		onShow:function(){
			//#ifdef H5
			document.title = '景区详情'
			//#endif
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.updateTuijians(this.tabVal)
			}
		},
		mounted() {
			this.getCommentList();
			this.getScenceDetails();
			
		},
		methods: {
			getNewTravels_discover(attribute){
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					city:this.citys
				}
				this.$postApi(this.$path.GET_RECOMMEND_LIST,param).then(res=>{
					// this.recommendTravels = []
			
					// this.recommendTravels = res.data.data.list
					let list = res.data.data
					console.log("返回热门推荐列表目的地",res)
					if (res.data.success) {
						list.forEach(item => {
							item.otherImage = this.pub.delLastf(item.otherImage)
							if(item.readCount == null || item.readCount == "null"){
								item.readCount = 0
							}
							switch(item.type){
								case "1":
									item.type = "景区"
								break;
								case "2":
									item.type = "酒店"
								break;
								case "3":
									item.type = "游记"
								break;
								case "4":
									item.type = "餐厅"
								break;
								case "5":
									item.type = "美食"
								break;
								case "6":
									item.type = "农家乐"
								break;
							}
						})
					this.recommendTravels = list
					}	
				})
				
			},
			goToTravel:function(id,type){
				console.log(type)
				var url = ''
				switch(type){
					case "景区":
						url = '/pages/scence/scencedetail?id=' + id
					break;
					case "酒店":
						url = '/pages/hotel/hoteldetail?hotelid=' + id
					break;
					case "游记":
						url = '/pages/travelDetail/travelDetail?id=' + id
					break;
					case "餐厅":
						url = '/pages/restaurant/restaurant_detail?id=' + id
					break;
					case "美食":
						url = '/pages/food/foodlist_new?id=' + id
					break;
					case "农家乐":
						url = '/pages/agritainment/agritainmentdateil?id=' + id + '&title='+ '菜品介绍'
					break;
				}
				uni.navigateTo({
					url:url,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			lookMoreComment(){
				uni.navigateTo({
					url: "/pages/comment/comment?title=" + this.getDetails.name + "&id=" + this.getDetails.id + "&falg=2",
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			updateTuijians: function(index) {
				switch (index) {
					case 0:
						this.searchSpotByC()
						break;
					case 1:
						this.searchApp()
						break;
					case 2:
						this.searchHotelByC()
						break;
				}
			},
			goPhotoList(active){
				
				let list = this.getDetails.otherImage.toString().split(";");
				let videos = {
					videoPath:this.getDetails.videoPath,
					videoimg:this.pub.fmtImgUrl(this.getDetails.videoimg)
				}
				// list.forEach(i => {
				// 	i = this.pub.fmtImgUrl(i);
				// });
				uni.setStorage({
					key:'vido_list',
					data:videos
				})
				console.log("图片列表list---------->",list);
				uni.setStorage({
					key:'photo_list',
					data:list
				})
				uni.navigateTo({
					url:'/pages/photolist/photolist?active='+ active,
					animationType: 'pop-in',
					animationDuration:'200'
				})
			},

			//获取评论数据
			getCommentList(){
				var that = this;
				var params = {
					pageNo:'1',
					pageSize:'10',
					busid: this.scenicId
				}
				this.$postApi(this.$path.GET_NEW_COMMENT_LIST,params).then(res => {
					console.log("评论列表返回数据------------->",res.data);
					if(res.data.success){
						var data = res.data
						this.comments = data.data.list
						this.total = data.data.total
					}
					
						
					// if(comments.length > 0){
					// 	console.log(">>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<",this.comments.length)
					// }
					
					// res.data.data.forEach(item=>{
					// 	item.commentator.headPortrait = this.pub.fmtImgUrl(item.commentator.headPortrait);
					// })
					// this.comment_list = res.data.data;
					
				})
			},
			audioPlay(src) {
				innerAudioContext.src = this.pub.fmtAudioUrl(src);
				if (innerAudioContext) {
					console.log(this.startPlay)
					if (this.startPlay) {
						innerAudioContext.play();
						console.log('play')
						this.startPlay = false
					} else {
						console.log('pause')
						innerAudioContext.pause();
						this.startPlay = true
					}
				}
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			golink(item) {
				this.pub.jumpToWeb(item.strategySrc)
			},
			goWay() {
				var location = {
					latitude:this.getDetails.latitude,
					longitude:this.getDetails.longitude
				};
				console.log("经纬度---------->",location);
				uni.navigateTo({
					url:'../map/map?item=' + encodeURIComponent(JSON.stringify(location))
				})
				// uni.showToast({
				// 	title: '此功能暂未开通！',
				// 	icon: 'none',
				// 	duration: 2000
				// });
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			reserve(item, type) {
				//预订时需要判断是否有登录信息。万维或本地获取都可
				//没有登录信息则跳转万维登录页面，且要把当前页面url及所需参数送入
				// let account = this.pub.getAccount();
				// let openid = this.pub.getOpenid();
				// if (!account || !openid) {
				// 	let param = {
				// 		spotId:this.scenicId
				// 	};
				// 	let url = "https://sz.smates.cn/app/index.html#/pages/index?page=2&param=" + encodeURIComponent(JSON.stringify(param));
				// 	let to = this.$path.WWLOGIN + "?url=" + encodeURIComponent(url);
				// 	this.pub.jumpToWeb(to);
				// 	return
				// }
				
				
				
				let path = ''
				if (type == 0) { // 订票须知
					path = 'ticket'
				} else { // 预订
					path = 'bookticket'
					item.titleName = this.getDetails.goodsName
					if(!this.pub.checkUserInfo()) {
						return
					}
				}
				uni.setStorage({
					key:'ticket',
					data:item
				})
				let id = this.getDetails.id;
				console.log("景区id----------->",id);
				uni.navigateTo({
					url: '/pages/scence/' + path + '?id=' + id + "&title=" + this.getDetails.title,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},

			goGuideMore(item){
				uni.navigateTo({
					url:"/pages/scence/scenceGuide/scenceGuide?item=" + encodeURIComponent(JSON.stringify(item)),
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			
			//获取景区数据
			getScenceDetails(){
				var that = this;
				var params = {
					id:this.scenicId,
				}
				this.$postApi(this.$path.GET_SCENIC_BYID,params).then(res => {
					console.log("景区详情返回数据----------->",res.data);
					
					if(res.data.success){
						let item = res.data.data;
						this.getTicketBySpotId(item.productId)
						this.spotCity = item.cityAddress;
						this.getDetails = item;
						this.getDetails.project_new = this.pub.TransferString(this.getDetails.project);
						this.getDetails.scenicTraffic_new = this.pub.TransferString(this.getDetails.traffic);
						this.getDetails.ticketRaiders_new = this.pub.TransferString(this.getDetails.ticketRaiders);
						this.getDetails.datamark_new = this.pub.TransferString(this.getDetails.datamark);
						// this.getTicket = item.tickets;
						
						this.swiperList[0] = {
							id:0,
							type:'image',
							url: this.pub.delLastf(item.mainImage)
						}
						
						console.log("图片------->",this.swiperList);
						// 处理介绍文字
						this.introduction = this.getDetails.digest.slice();
						if (this.getDetails.digest.length > 60) {
							this.getDetails.digest = this.introduction.slice(0, 60) + '...'
						} else {
							this.getDetails.digest = this.introduction
						}
						console.log("格式化后的数据---------》",this.getDetails);
						console.log("门票数据-------------》",this.getTicket);
					}
				})
			},
			
			viewtext() { // 查看全文
				if (this.isfull) {
					this.getDetails.digest = this.introduction
					this.view_text = '收起'
					this.isfull = false
				} else {
					this.introduction = this.getDetails.digest.slice()
					this.getDetails.digest = this.introduction.slice(0, 60) + '...'
					this.view_text = '显示全文'
					this.isfull = true
				}
			},
			showAll() {
				if (this.ischange) {
					this.scenic_spots = this.scenic_spots_all
					this.all_text = '点击收起'
					this.ischange = false
				} else {
					this.scenic_spots_all_clone = this.scenic_spots_all.slice();
					this.scenic_spots = this.scenic_spots_all_clone.splice(0, 4)
					this.all_text = '点击显示全部'
					this.ischange = true
				}
			},
			getTicketBySpotId(productId) { // 门票列表
				this.$postApi(this.$path.GET_ADMISSION_LIST, {
					productId: productId
				}).then(res => {
					console.log("门票返回数据------------>",res);
					if (res.data.success) {
						this.getTicket = res.data.data
					}
				})
			},
	
		},
		destroyed() {
			if (innerAudioContext) {
				innerAudioContext.stop();
				this.startPlay = true
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.popular-travels-role{
		display: flex;
		padding-bottom: 30upx;
	}
	.popular-travels-list-headPortrait{
		width: 36upx;
		height: 36upx;
		margin-right: 8upx;
		// border-radius: 50%;
	}
	.popular-travels-list-author{
		margin-bottom: 10upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
		opacity: 0.9;
	}
	.popular-travels-list-time{
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #999999;
		opacity: 0.9;
	}
	.popular-travels-title{
		padding: 57upx 0 17upx 24upx;
		font-family: PingFang-SC-Bold;
		font-size: 44upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #000000;
	}
	.popular-travels-list{
		width: 48.5%;
		margin-bottom: 24upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;
		
	}
	.discover-travelist-aers{
		padding: 5upx 12upx;
		background-color: #353638;
		border-radius: 20upx;
		opacity: 0.8;
		position: absolute;
		bottom:15upx;
		right: 15upx;
		font-family: PingFang-SC-Bold;
		font-size: 24upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #ffffff;
	}
	.popular-travels-list-info{
		padding: 20upx 13upx 0 13upx;
	}
	.popular-travels-list-boxs{
		background: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 18upx 24upx 24upx 24upx;
		
		
	}
	.popular-travels-list-img{
		position: relative;
		width: 100%;
		height: 267upx;
	}
	.popular-travels-list-text{
		width: 100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		line-height: 40upx;
		margin-bottom: 20upx;
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #1a1a1a;
	}
	.flex-col{
		display: flex;
		flex-direction: column;
	}
	.flex-row{
		display: flex;
		flex-direction: row;
	}
	.headPortrait{
	  width:54upx;
	  height:54upx;
	  border-radius:50%;
	}
	.flex-space{
	  display: flex;
	  justify-content: space-between;
	}
	.lookMoreCommentKey{
	  color:#139aff;
	  font-size:30upx;
	  line-height:30upx;
	  margin-right:1upx;
	  letter-spacing: 3upx;
	  overflow: hidden;
	}
	.lookMoreCommentIco{
	  width:32upx;
	  height:32upx;
	  overflow: hidden;
	  position: relative;
	  font-size: 30upx;
	  color: #139aff;
	}
	.noComment{
		width: 100%;
		height: 460rpx;
	  box-sizing: border-box;
	  padding: 24upx;
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	.noCommentImg{
		width: 100%;
		height: 100%;
	  // width: 180upx;
	  // height: 180upx;
	}
	.noCommentKey{
	  font-size: 30upx;
	  color: #bfbfbf;
	  letter-spacing: 4upx;
	}
	.scencedetail {
		background: #fcfcfc;
		font-size:32upx;
		.signtips {
			padding: 0 0 54upx;
		}

		.swiper-contain {
			position: relative;
			.back{
				position: fixed;
				top:65upx;
				left: 25upx;
				border-radius: 50%;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255,255,255,0.6);
				text{
					font-size: 45upx;
				}
				
				z-index: 20;
			}
		}

		swiper {
			min-height: 506upx;
		}

		.swiper-img {
			width: 100%;
			height: 100%;
		}
		.pic-tip{
			position:absolute;
			display: flex;
			width: 160upx;
			height: 40upx;
			right: 20upx;
			bottom: 50upx;
			border-radius: 18upx;
			flex-direction: row;
			justify-content: center;
			background: #000;
			opacity:0.7;
			z-index: 22;
			.pic{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				font-size: 22upx;
				color: #fff;
				
				// width: 200upx;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					
				}
				.image{
					// margin: -2upx 4upx 0 3upx;
					// width: 30upx;
					// height: 30upx;
				}
			}
		}
		.dots {
			display: flex;
			position: absolute;
			width: 100%;
			justify-content: center;
			align-items: center;
			bottom: 64upx;
			// z-index: 100;

			.dot {
				width: 17upx;
				height: 17upx;
				border-radius: 50%;
				margin-left: 12upx;
				background: #D2D5DA;
				transition: all .3s;

				&.active {
					background: black;
				}
			}
		}

		// 介绍
		.scenic-introduce {
			border-radius: 40upx 40upx 0 0;
			padding: 40upx 40upx 0 40upx;
			background: #fcfcfc;
			position: relative;
			top: -18px;
			.title-line {
				display: flex;
				align-items: center;
				margin-bottom: 18upx;

				.name {
					// margin-bottom: 10upx;
				}

				.lbbox {
					margin-left: 21upx;
					color: #FE5A34;
					display: flex;
					align-items: center;

					.lb-icon {
						width: 32upx;
						height: 29upx;
					}
				}
			}

			.sciene-con-box {
				position: relative;
				
				.sciene-con {
					// font-weight: 300;
					color: #4d4d4d;
					font-size:30upx;
					line-height: 44upx;
				}

				.c-btn {
					color: rgb(0,146,255);
					margin-left: 10upx;
					position: absolute;
					bottom: 0upx;
					right: 20upx;
				}
			}
		}
		//游客点评
		.traveller-info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 40upx;
			.title{}
			.more{
				padding-top: 10upx;
				color: #333333;
				// display: flex;
				// flex-direction: column;
				// justify-content: flex-start;
			}
		}
		.no-travel{
			display: flex;
			justify-content: center;
			justify-items: center;
			padding-bottom: 40upx;
			.img{
				width: 500upx;
				height: 300upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		//景区指南
		.scence-guide{
			width: 100%;
			// height: 400upx;
			padding:32upx;
			// background: #F5F5F5;
			position: relative;
			.guide-img{
				position: absolute;
				top: 0upx;
				left: 0;
				z-index: 11;
				// padding: 5upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				// text-align: center;
				width: 180upx;
				height: 55upx;
				color: #fff;
				font-size: 30upx;
				border-radius: 0 22upx 22upx 0;
				background:url(../../static/img/scence_guide.png) no-repeat center/cover;
			}
		}
		.guide-tab{
			// height: 360upx;
			color: #212121;
			background: #fff;
			box-shadow: 0px 0px 5px 0px #ddd;
			border-radius: 16upx;
			display: flex;
			font-size: 28upx;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			padding: 20upx;
			.left-all{
				padding: 20upx 14upx 14upx 14upx;
				// padding-left: 14upx;
				// padding-right: 14upx;
				width: 95%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				// align-items: center;
			}
			.time,.ticket,.tips,.bus{
				padding: 8upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 100%;
				.left-time,.left-ticket,.left-tips,.left-bus{
					width: 25%;
					line-height: 36upx;
				}
				.right-time,.right-ticket,.right-tips,.right-bus{
					width: 75%;
					display: flex;
					line-height: 36upx;
					justify-content: center;

					text{
						
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					text br{
						display: none;
						}
					flex-direction: column;
					
				}
			}
			// .left{
			// 	margin: 12upx;
			// 	width: 20%;
			// 	// width: 200upx;
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: space-around;
			// 	// align-content: center;
			// 	
			// 	text{
			// 		float: right;
			// 	}
			// }
			// .right{
			// 	padding: 14upx 0 10upx 0;
			// 	width: 70%;
			// 	// width: 200upx;
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: space-around;
			// 	// align-content: center;
			// 
			// 	.right-bus,.right-ticket,.right-tips{
			// 		overflow: hidden;
			// 		text-overflow:ellipsis;
			// 		white-space: nowrap;
			// 	}
			// }
			.right-more{
				margin-left: 8upx;
				width: 2%;
				display: flex;
				color: #0092ff;
				font-size: 40upx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-left: 15upx;
			}
		}
		.line20 {
			height: 20upx;
			background: #F7F7F7;
		}

		.line8 {
			height: 8upx;
			background: #F7F7F7;
		}
		.line4{
			height: 4upx;
			background: #F7F7F7;
		}
		// dizhi 
		.address-list{
			width: 100%;
			padding: 0 32upx 32upx 32upx;
				
		}
		.address {
			border-radius: 50upx;
			box-shadow: 0 0 5px 0 #ddd;
			// width: 95%;
			// height: 50upx;
			padding: 24upx 16upx 24upx 16upx;
			// padding: 40upx;
			background: #fff;
			height: 96upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.tip-img{
				// margin-left: 30upx;
				width: 100upx;
				height: 50upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.address-del {
				font-size: 28upx;
				margin-left: 20upx;
				width: 90%;
				color: #212121;
			}

			.tip {
				// width: 122upx;
				// height: 44upx;
				// border: 1upx solid rgba(254, 90, 52, 1);
				// border-radius: 22upx;
				// color: #FE5A34;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40upx;
				color: #0092ff;
				height: 25upx;
				image{
					width: 100%;
					height: 100%;
				}
				.a-jt {
					width: 22upx;
					height: 22upx;
				}
			}
		}

		// 景区须知
		.scenic-spots {
			padding: 40upx;

			.s-title {
				padding: 32upx 0;
				border-bottom: 1upx solid #F5F5F5;
				font-weight: bold;
			}

			.s-line {
				&.time {
					display: flex;
				}

				margin-top: 31upx;
			
				line-height: 44upx;

				.left-name {
					flex-shrink: 0;
					font-weight: 500;
					margin-right: 23upx;
					width: 180upx;
					display: inline-block;
				}

				.right-name {
					font-weight: 400;
					// flex: 1;
					display: initial;
				}

				.right-content {
					display: flex;
					flex-direction: column;
				}
			}

			.all-btn {
				color: #2B91E2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 28upx;

				.xl {
					width: 14upx;
					height: 8upx;
					margin-left: 10upx;
				}
			}
		}

		// 门票须知
		.notes-booking {
			width: 100%;
			padding: 0 40upx;
			margin-top: 40upx;
			.tickets-head{
				display: flex;
				flex-direction: row;
				justify-content: center;
				
				.title{
					width: 70%;
					// background: url(../../static/img/ticket_title.png) no-repeat center;
					display: flex;
					justify-content: space-around;
					
					align-items: center;
					// width: 100upx;
					font-weight: bold;
				}
				.nav-bar{
					height: 1px;
				}
			}
			.notes-li {
				padding: 38upx 0 43upx;
				border-bottom: 1upx solid #eee;
				.notes-info{
		
					.second,.third{
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						padding-top: 20upx;
					}
					.third{
						width: 102%;
					}
					.ticket-nodes{
						color: #333333;
						font-weight: 400;
					}
					.back-tips{
						width: 30%;
						color: rgb(102,102,102);
						font-size: 26upx;
					}
					.money{
						font-family: PingFang-SC-Medium;
						color: #ff4d1d;
						// font-size: 34upx;
						// width: 40%;
					}
					.notes-con-btn {
						width: 120upx;
						height: 58upx;
						background: linear-gradient(left,#fa643d,#ff504f);
						border-radius: 50upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						// margin-left: 20upx;
						// margin-top: 23upx;
					}
					
				}
			}
			
// 			.notes-con {
// 				display: flex;
// 				align-items: flex-end;
// 				justify-content: space-between;
// 				padding-right: 20upx;
// 				.notes-con-left {
// 					.back-tips{
// 						font-size: 25upx;
// 						color: #666666;
// 					}
// 					.right-icon {
// 						width: 13upx;
// 						height: 23upx;
// 						margin-left: 11upx;
// 					}
// 				}
// 
// 				.notes-con-right {
// 					color: #FE5A34;
// 
// 					.notes-con-btn {
// 						width: 106upx;
// 						height: 44upx;
// 						background: rgba(254, 90, 52, 1);
// 						border-radius: 22upx;
// 						color: #fff;
// 						display: flex;
// 						align-items: center;
// 						justify-content: center;
// 						margin-top: 23upx;
// 					}
// 				}
// 			}
		}

		// 景区相关攻略
		.strategy {
			.strategy-title {
				padding: 45upx 40upx;
				font-weight: 400;
			}

			.strategy-list-box {
				// margin:0 22upx 60upx 22upx;
			}

			.strategy-list {
				margin: 0 22upx 60upx 22upx;
				display: flex;
				overflow-x: scroll;
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;

				.strategy-li {
					width: 600upx;
					flex-shrink: 0;
					box-sizing: border-box;
					padding: 32upx;
					margin-right: 20upx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 3upx 20upx 0upx rgba(61, 61, 61, 0.26);
					border-radius: 20upx;

					.strategy-li-1 {
						width: 110upx;
						height: 32upx;
						line-height: 32upx;
						color: #fff;
						background: url(../../static/img/label-bg.png) no-repeat center/cover;
					}

					.strategy-li-2 {
						margin: 21upx 0 38upx;
						font-weight: bold;
					}

					.strategy-li-3 {
						display: flex;

						.li-3-left {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.li-3-left-bottom {
								.cityname {
									padding-right: 25upx;
									border-right: 1px solid #333333;
									margin-right: 25upx;
								}
							}
						}

						.li-3-right {
							margin-left: 36upx;

							.li-3-right-img {
								width: 176upx;
								height: 150upx;
							}
						}
					}
				}
			}
		}
		//评论
		.travller-list{
			padding: 0 20upx;
			display: flex;
			flex-direction: row;
			font-size: 28upx;
			
			.list-left{
				width: 15%;
				text-align: center;
				display: flex;
				flex-direction: row;
				justify-content: center;
				// align-items: center;
				.icon{
					width: 80upx;
					height: 80upx;
					border-radius: 100upx;
					image{
						border-radius: 100upx;
						width: 100%;
						height: 100%;
					}
				}
			}
			.list-right{
				// padding-left: 20upx;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-bottom: 1upx solid #eee;
				padding:0 20upx 30upx 20upx;
			}
			
		}
		// 周边推荐
		.periphery {
			// padding: 0 0upx 54upx;

			.periphery-title {
				padding: 45upx 40upx;
				font-weight: bold;
			}

			.tab-wrapper {
				padding: 0 40upx;
				padding-bottom: 30upx;
				font-size: 26upx;
				display: flex;
				flex-direction: row;
				// justify-content: cente;
				.tab {
					// width: 100upx;
					padding-bottom: 12upx;
					border-bottom: 4upx solid transparent;
					margin-right: 43upx;

					&.active {
						color: #2B91E2;
						border-bottom-color: #2B91E2;
					}
				}
			}

			.goods-list {
				width: 100%;
				padding: 0 40upx;
				// height: 800upx;
				// display: flex;
				// flex-direction: row;
				// flex-wrap: nowrap;
				box-sizing: border-box;
				white-space: nowrap;
				width: 100%;
				.goods-li {
					// float: left;
					text-align: center;
					box-sizing: border-box;
					padding-right: 18upx;
					// margin-bottom: 47upx;
					width: 40%;
					
					&:nth-child(2n) {
						margin-right: 0upx;
					}

					.img_1 {
						
						// width: 100%;
						// height: 100%;
						// width: 237upx;
						height: 200upx;
					}

					.goods-name {
						text-align: center;
						// align-content: center;
						// font-weight: bold;
						// padding: 22upx 0;
						
					}

					.label-box {
						display: flex;
						flex-wrap: nowrap;
						width: 100%;
						box-sizing: border-box;
						
						.label {
							padding: 6upx 11upx;
							color: #FFB415;
							font-size: 20upx;
							width: 100upx;
							border: 1upx solid rgba(255, 180, 21, 1);
							border-radius: 4upx;
							margin-right: 14upx;
							margin-bottom: 14upx;
						}
					}
				}
			}
		}
	}
</style>